import { For, Index } from "solid-js"
import CopTodoItem from "../cop-todo-item"
import type { Component } from "solid-js"
import type { TodoItem } from "../../src/index.d"

const TodoList: Component<{
  todoList: Array<TodoItem>
  removeTodoEvent: (index: number) => void
  todoCheckStatusChangeEvent: () => void
}> = props => {
  return (
    <div class="list">
      <Index each={props.todoList}>
        {(todo, i) => (
          <CopTodoItem
            item={todo()}
            index={i}
            removeTodoEvent={props.removeTodoEvent}
            todoCheckStatusChangeEvent={props.todoCheckStatusChangeEvent}
          ></CopTodoItem>
        )}
      </Index>
    </div>
  )
}

export default TodoList
